<template>
	<view class="page">
		<view class="title">
			3.13.computed计算属性用法及方法对比
		</view>
		<view class="p">
			官网链接API
			<uni-link href="https://cn.vuejs.org/guide/essentials/computed.html" text="computed计算属性"
				color="#007BFF"></uni-link>
		</view>
		<view class="p">
			<text>{{author.name}} 是否发过书:</text>
		</view>
		<view class="p">
			{{ publishedBooksMessage }}
		</view>
		<view class="">
			computed 计算出来的属性为只读，不能修改，建议更改原变量。例如 C(姓名) = A(姓) + B(名)，那么计算过后我们将无法再给C赋值。<text class="red">
				实际开发场景应该避免直接修改计算属性值
			</text>
			使用JS的function方法同样可以使用 A + B 来获得C ！但是这么做function调用一次，就会执行一次。而计算属性则是有缓存机制只执行一次。
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'

	// 基本信息
	const author = ref({
		name: '莫言',
		books: [
			'Vue 2 - 丰臀厚乳',
			'Vue 3 - 红高粱家族',
			'Vue 3.4 - 晚熟的人'
		]
	})

	// 一个计算属性 
	const publishedBooksMessage = computed(() => {
		return author.value.books.length > 0 ? '发行过' + author.value.books.length + '本书' : '没有发布过书籍'
	})

	// JS语法 结构简单的话 可以一行显示 去掉 {} 和 reture
	//const publishedBooksMessage = computed(() => author.value.books.length > 0 ? '发行过' + author.value.books.length + '本书' :
	//'没有发布过书籍')
</script>


<style lang="scss" scoped>

</style>